<template>
	<view class="teacher">
		<view class="app-card">
			<view class="title">课堂情况</view>
			<classRoom v-if="sync" :classRoom.sync="classRoom" @change="changeClass" />
		</view>
		<view class="app-card">
			<view class="title">学生自习状态</view>
			<mycheckbox id="1" @change="change" :group="pro" />
			<textarea auto-height=true v-model="remarks" placeholder="请输入问题描述" v-if="isqita" />
		</view>
	</view>
</template>

<script>
	const pro = [
		{
			title: '多数人学习',
			state: true
		},
		{
			title: '少数人学习',
			state: false
		},
		{
			title: '没人学习',
			state: false
		},
		{
			title: '其他',
			state: false
		},
	]
	import mycheckbox from '../../../components/checkbox.vue'
	import classRoom from '../../../components/classroom.vue'
	export default {
		props:['resObj'],
		mounted() {
			if(Object.keys(this.resObj).length > 0){
				const state = this.resObj.studyState / 10 - 1 > 0 ? this.resObj.studyState / 10 - 1 : 0
				this.pro[state].state = true;
				const {publicHoliday,privateHoliday,truancy} = this.resObj;
				console.log({publicHoliday,privateHoliday,truancy})
				this.classRoom = {publicHoliday,privateHoliday,truancy}
				this.sync = true;
				console.log(this.classRoom)
				if(this.resObj.remarks.length > 0){
					this.pro[this.pro.length-1].state = true;
					this.isqita = true;
					this.remarks = this.resObj.remarks;
				}
				
			}else{
				this.sync = true
			}
		},
		data(){
			return {
				pro,
				isqita: false,
				classRoom: {
					privateHoliday: 0,
					publicHoliday: 0,
					truancy: 0
				},
				state: 10,
				remarks:'',
				sync:false
			}
		},
		watch:{
			remarks(){
				this.$emit('change',{...this.classRoom,studyState:this.state,remarks:this.remarks})
			}
		},
		methods:{
			change(id,index){
				if(id != 1) return
				if(index == this.pro.length - 1) {
					this.pro[index].state = !this.pro[index].state;
					this.isqita = !this.isqita
				}else{
					const newpro = this.pro.map( (ele,index) => {
						if(index == this.pro.length -1){
							return {
								state:ele.state,
								title: ele.title,
							}
						}
						return {
							state:false,
							title: ele.title,
						}
					})
					this.state = (index+1)*10
					newpro[index].state = true;
					this.pro = newpro;
				}
				this.$emit('change',{...this.classRoom,studyState:this.state,remarks:this.remarks})
			},
			changeClass(newClass){
				this.classRoom = newClass;
				this.$emit('change',{...this.classRoom,studyState:this.state,remarks:this.remarks})
			}
		},
		components:{
			mycheckbox,
			classRoom,
		}
	}
</script>

<style lang="scss" scoped>
	.teacher{
		width: 100%;
		.title{
			font-size: 14px;
			margin-bottom: 10px;
		}
	}
	
</style>
